<template>
    <div>
      <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" class="screenfull-svg" />
    </div>
  </template>
  
  <script lang="ts" setup>
  import { useFullscreen } from '@vueuse/core';
  
  /**
   * 使用 useFullscreen 钩子来管理全屏状态
   * @returns {Object} 包含 isFullscreen, enter, exit, toggle 方法的对象
   */
  const { isFullscreen, enter, exit, toggle } = useFullscreen();
  </script>
  
  <style lang='scss' scoped>
  .screenfull-svg {
    display: inline-block;
    cursor: pointer;
    fill: #5a5e66;
    width: 20px;
    height: 20px;
    vertical-align: 10px;
  }
  </style>